// 此处完成购物车逻辑代码
//1. 先把list里面的数据渲染出来
//2. 能够全选反选同时总价 总购买数量变化
//3. 单个商品数量能够加减 但是有限制 加减的时候小记价格，总价要变化，总购买数量也要变化
//4. 能够删除单个商品，删除的同时 总购买数量和总价要变化
//5. 能够删除选中商品，删除的同时 总购买数量和总价要变化
//6. 能够清空购物车，总数量和总价要对应变化
// 获取元素
let content = document.querySelector(".content");

// 渲染页面
// 1-1 准备一个函数
bindHTML();
function bindHTML() {
  // 1-4 根据 list 计算一些数据
  // 准备一些变量
  // 当前选中的个数
  let selectNum = 0;
  // 商品总数
  let totalNum = 0;
  // 商品总价
  let totalPrice = 0;
  list.forEach(function (item) {
    if (item.select) {
      totalPrice += item.price * item.buy_num;
      totalNum += item.buy_num;
      selectNum++;
    }
  });
  // 1-2 准备渲染
  let str = `
        <div class="top">
        <input type="checkbox" ${
          selectNum >= list.length && selectNum != 0 ? "checked" : ""
        }  class="select_all"> 全选
        </div>
        <ul class="center">
        `;

  // 1-3 根据数组生成li
  list.forEach(function (item) {
    str += `
        <li>
            <div class="select">
                <input type="checkbox" data-id="${
                  item.id
                }" class="select_one" ${item.select ? "checked" : ""}>
            </div>
            <div class="pic">
                <img src="${item.pic}" alt="">
            </div>
            <div class="name">
                ${item.name}
            </div>
            <div class="price">
                ¥<span>${(item.price - 0).toFixed(2)}</span>
            </div>
            <div class="number">
                <button data-id="${item.id}" class="sub">-</button>
                <input type="text" value="${item.buy_num}">
                <button data-id="${item.id}" class="add">+</button>
            </div>
            <div class="subtotal">
                ¥<span>${(item.price * item.buy_num).toFixed(2)}</span>
            </div>
            <div class="del">
                <button data-id="${item.id}" class="del_btn">删除</button>
            </div>
        </li>
            `;
  });

  str += `
  </ul>
  <div class="bottom">
      <p>总购买数量：${totalNum}</p>
      <input>
      <p>
          <button class="pay" data-price="${totalPrice}">去结算</button>
          <button class="clear">清空购物车</button>
          <button class="clear_select">删除所有已选</button>
          <button class="list">返回列表页</button>
      </p>
      <p>总价格：¥<span>${totalPrice.toFixed(2)}</span></p>
  </div>
  `;

  //   直接把准备好的str 放在content 中
  content.innerHTML = str;
}

// 2 绑定事件
content.addEventListener("click", function (e) {
  // 处理事件对象兼容
  e = e || window.event;
  let target = e.target;

  // 通过 target 来判断你点击的是哪一个按钮

  // 判断点击的是全选
  if (target.className == "select_all") {
    // 1. 拿到自己是true 还是false
    let type = target.checked;
    // 2. 赋值
    list.forEach(function (item) {
      item.select = type;
    });
  }
  // 判断点击的是每一个商品的选项按钮
  if (target.className == "select_one") {
    // 1. 拿到自己应该修改数组中的哪一条数据
    // 在渲染页面的时候，把自己这一条数据的id渲染到标签身上
    // 如果想让整个购物车结构联动，必须把list中的数据修改
    // 改哪条数据？
    // 你点的是 第一个li，改哪一个？
    // 在渲染页面的时候，吧数据的id渲染在标签上
    let id = target.dataset.id;
    // 2. 在list中找到数组中和id一样的那一条数据
    let goods = list.find(function (item) {
      return item.id == id;
    });
    // 3. 把内容修改掉
    goods.select = !goods.select;
  }

  // 判断点击的是每一个商品的数量减少
  if (target.className == "sub") {
    // 1. 拿到自己身上记录的id
    let id = target.dataset.id;
    // 拿到指定数据
    let goods = list.find((item) => {
      return item.id == id;
    });
    // 3. 判断一下是否已经是 1
    if (goods.buy_num <= 1) return;
    goods.buy_num--;
  }

  // 判断点击的是每一个商品的数量增加
  if (target.className == "add") {
    let id = target.dataset.id;
    let goods = list.find(function (item) {
      return item.id == id;
    });
    if (goods.buy_num >= goods.number) return;
    goods.buy_num++;
  }

  // 判断点击的是每一个商品的删除按钮
  if (target.className == "del_btn") {
    let id = target.dataset.id;
    list = list.filter(function (item) {
      return item.id != id;
    });
  }

  // 判断点击的是去结算
  if (target.className == "pay") {
    // 1. 拿到应该支付的总价
    let price = target.dataset.price - 0;

    // 2. 提示用户
    window.alert(`你需要支付${price}元人民币，点击确定跳转到支付页面😊`);
  }

  // 清空购物车
  if (target.className == "clear") {
    // 1. 吧list变成一个空数组
    list = [];
  }

  // 判断点击的是删除所有已选中
  if (target.className == "clear_select") {
    // 1.把list里面所有的select为true删除
    // 把list里面select为false留下
    list = list.filter(function (item) {
      return item.select == false;
    });
  }

  // 判断点击的是返回列表页
  if(target.className == "list"){
    window.location.href = "https://www.jd.com";
  }

  // 3. 重新渲染页面
  bindHTML();
});
